<template>
  <card-container @refresh="refresh" :title="title">
    <!--隐患数据容器-->
    <div class="hidden-danger-pot">
      <div class="number-symbol">
        <span style="color: rgba(66, 129, 255, 1)">{{ statisticsData.enterpriseCount }}</span>
        <img src="@/assets/images/checkPage/blue-spot.png">
      </div>
      <div class="number-symbol">
        <span style="color: rgba(251, 93, 92, 1)">{{ statisticsData.questionCount }}</span>
        <img src="@/assets/images/checkPage/pink-spot.png">
      </div>
      <span class="item-label">检查企业数量</span>
      <span class="item-label">总隐患数量</span>
      <div class="number-symbol">
        <span style="color: rgba(66, 129, 255, 1)">{{ statisticsData.zhenggaizhong }}</span>
        <img src="@/assets/images/checkPage/blue-spot.png">
      </div>
      <div class="number-symbol">
        <span style="color: rgba(255, 176, 120, 1)">{{ statisticsData.weizhenggai }}</span>
        <img src="@/assets/images/checkPage/orange-spot.png">
      </div>
      <span class="item-label">整改中隐患数</span>
      <span class="item-label">未整改隐患数</span>
      <div class="number-symbol">
        <span style="color: rgba(100, 189, 113, 1)">{{ statisticsData.zhenggaiwancheng }}</span>
        <img src="@/assets/images/checkPage/green-spot.png">
      </div>
      <div class="number-symbol">
        <span style="color: rgba(66, 129, 255, 1)">{{ statisticsData.wanchenglv }}</span>
        <img src="@/assets/images/checkPage/blue-spot.png">
      </div>
      <span class="item-label">整改完成隐患</span>
      <span class="item-label">整改完成率</span>

    </div>
  </card-container>
</template>

<script>
import {statisticsPageMixins} from "@/views/checkStatisticsPage/mixins/statisticsPageMixins";
import {statisticNumData} from "@/api/checkPage/statistics";

export default {
  mixins: [statisticsPageMixins],
  data() {
    return {
      title: '隐患数据',
      queryFun: statisticNumData,
      statisticsData: {}
    }
  },
  methods: {
    changeRowData(baseData) {
      return baseData
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/businessTheme.scss";
  // 设置隐患数据容器样式
  .hidden-danger-pot{
    width: calc(100% - 7px);
    height: 100%;
    padding-left: 7px;  //设置左侧缩进
    // background: #BBFFAA; //仅用于布局查看
    //设置内部元素位置
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; //沿辅轴方向自动换行
    align-items: flex-start;
    align-content: flex-start;
    //设置数字容器样式
    .number-symbol{
      width: 40%;
      height: 30px;
      flex-shrink: 0;
      //设置内部元素位置
      display: flex;
      //align-items: center;
      align-items: flex-start;
      justify-content: space-between;
      //设置文本样式
      font-size: $second-font-size;
      font-weight: 600;
      //设置彩点样式
      img{
        margin-top: 3px;
      }
    }
    //设置条目名样式
    .item-label{
      width: 40%;
      flex-shrink: 0;
      //设置文本样式
      font-size: $thirdly-font-size;
      color:rgba(96, 98, 102, 1);
      margin-bottom: 15px;
      margin-top: 1px;
    }
  }
</style>
